<template>
	<view>
		<view class="top">
			<image class="bg" src="/static/img/qianbaotop.jpg" mode=""></image>
			<view class="top_con">
				<!-- <view class="sharebox">
					收益规则
				</view> -->
				<view class="con_info flex">
					<image class="avatar" :src="userinfo.avatar||'https://bsc.fuliaoxx.com/1.jpg'" mode=""></image>
					<view class="info_right">
						<view class="name">
							{{userinfo.nickname}}
						</view>
						<view class="Id">
							ID:{{userinfo.user_id}}
						</view>
					</view>
				</view>
				<view class="numbox flex">
					<view class="num_item">
						<view class="num">
							{{friendlist.length}}
						</view>
						<view class="name">
							邀请总人数
						</view>
					</view>
					<!-- <view class="num_line">

					</view> -->
					<!-- <view class="num_item">
						<view class="num">
							{{friendlist.length*200}}
						</view>
						<view class="name">
							积分总收益
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="flex title">
			<view class="titleline">

			</view>
			我的团队
		</view>
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="friendlist" v-if="friendlist.length>0">
				<view class="frienditem flex" v-for="(item,index) in friendlist" :key="index">
					<image class="avatar" :src="item.avatar||'https://bsc.fuliaoxx.com/1.jpg'" mode=""></image>
					<view class="right flex">
						<view class="rl">
							<view class="name">
								{{item.nickname}}
							</view>
							<view class="time">
								<!-- jointime -->
								{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM')}}
								<!-- {{item.time}} -->
							</view>
						</view>
						<!-- <view class="rr flex">
							<image class="jf_icon" src="./static/jeficon.png" mode=""></image>
							{{Number(item.score).toFixed(2)}}
						</view> -->
					</view>
				</view>
			</view>

			<u-empty mode="data" v-else></u-empty>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getInvater,
		getInvaterData
	} from '@/api/my.js'
	export default {
		data() {
			return {
				friendlist: [],
				userinfo: {},
				data: {}
			};
		},
		methods: {
			clickto(url) {
				uni.$u.route(url)
			},
			getlist() {
				getInvater().then(res => {
					this.friendlist = res.data.data
				})
			}
		},
		onLoad() {
			this.getlist()
			this.userinfo = uni.getStorageSync('userinfo')
		}
	}
</script>

<style lang="less">
	.title {
		color: #FF6001;
		font-size: 36rpx;
		margin-left: 32rpx;
		font-weight: bold;
		margin-bottom: 27rpx;

		.titleline {
			width: 9rpx;
			height: 32rpx;
			background: #FF8616;
			border-radius: 4rpx;
			margin-right: 9rpx;

		}
	}

	.top {
		padding: 0 30rpx;
		height: 381rpx;
		position: relative;
		margin-bottom: 40rpx;

		.bg {
			position: absolute;
			width: 689rpx;
			height: 381rpx;
		}

		.top_con {
			position: absolute;
			width: 689rpx;
			height: 381rpx;

			.sharebox {
				position: absolute;
				line-height: 68rpx;
				background: linear-gradient(151deg, #FFD22B, #FFA304);
				box-shadow: 0px 0px 7rpx 0px #F1D53E;
				font-size: 30rpx;
				color: #fff;
				padding: 0 18rpx 0 34rpx;
				top: 66rpx;
				right: 0;
				border-top-left-radius: 34rpx;
				border-bottom-left-radius: 34rpx;
			}

			.con_info {
				padding: 69rpx 0 0 50rpx;
			}

			.avatar {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
				border: 4rpx solid #ffb575;
			}

			.info_right {
				color: #fff;
				margin-left: 24rpx;

				.name {
					font-size: 32rpx;
				}

				.Id {
					font-size: 24rpx;
					margin-top: 14rpx;
				}
			}
		}
	}

	.numbox {
		justify-content: space-around;
		color: #fff;
		margin-top: 60rpx;
		text-align: center;

		.num {
			font-size: 40rpx;
		}

		.name {
			font-size: 26rpx;
		}

		.num_item {
			// width: 228rpx;
		}

		.num_line {
			width: 2rpx;
			height: 37rpx;
			background: rgba(211, 214, 219, 0.38);
		}
	}

	.tab_box {
		padding: 0 130rpx;
		border-bottom: 1rpx solid #F4F5F6;
		justify-content: space-between;
		margin-bottom: 25rpx;

		.tabitem {
			padding-bottom: 16rpx;
			border-bottom: 5rpx solid #fff;
			width: fit-content;
			font-size: 26rpx;
			color: #8B8B8B;
			line-height: 30rpx;
		}

		.active {
			font-size: 30rpx;
			font-weight: 800;
			color: #FF720B;
			border-bottom: 5rpx solid #FF720B;
		}
	}

	.friendlist {
		padding: 0 0 50rpx 32rpx;

		.frienditem {
			align-items: flex-end;
			padding-top: 28rpx;
		}

		.avatar {
			margin-right: 30rpx;
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			align-self: flex-start;
		}

		.right {
			flex: 1;
			justify-content: space-between;
			border-bottom: 1rpx solid #DCDCDC;
			padding-bottom: 30rpx;
			height: 90rpx;

			.rl {
				.name {
					font-size: 32rpx;
					color: #333333;
				}

				.time {
					font-size: 24rpx;
					color: #7A7878;
				}
			}

			.rr {
				color: #FB6419;
				font-size: 33rpx;
				font-weight: bold;
				padding-right: 33rpx;
				line-height: 25rpx;

				.jf_icon {
					width: 19rpx;
					height: 21rpx;
					margin-right: 10rpx;
					align-self: flex-end;
				}

			}
		}
	}

	.scroll-view {
		// height: calc(100vh - 381rpx -45rpx - 30rpx - 16rpx - 5rpx -1rpx);
		height: calc(100vh - 490rpx - 44px - var(--status-bar-height));
		/* #ifdef MP */
		height: calc(100vh - 490rpx - var(--status-bar-height));
		/* #endif */
		border-top: 2rpx solid rgba(205, 205, 205, .45);
	}

	.flex {
		display: flex;
		align-items: center;
	}
</style>
